<template>
	<view class="container">
		<view class="wrapper">
			<view class="left-top-sign">LOGIN</view>
			<view class="welcome">欢迎回来！</view>
			<view class="input-content">
				<view class="input-item">
					<text class="tit">手机号码</text>
					<input type="text" v-model="phone" placeholder="请输入手机号码" />
				</view>
				<view class="input-item">
					<text class="tit">密码</text>
					<input type="password" v-model="password" placeholder="请输入密码" />
				</view>
			</view>
			<button class="confirm-btn" @click="login">登录</button>
			<view class="forget-section">忘记密码?</view>
		</view>
		<view class="register-section">
			还没有账号?
			<text>马上注册</text>
		</view>
	</view>
</template>

<script>
import api from '../../utils/http/api.js';
export default {
	data() {
		return {
			phone: '17732372923',
			password: 'zqlg0415',
			userInfo: {} // 用户信息对象
		};
	},
	methods: {
		// 手机号登录
		async login() {
			var phonez = /^(((1[0-9][0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
			var passwordz = /^[\w_-]{6,16}$/;
			//使用
			if (!phonez.test(this.phone)) {
				uni.showToast({
					title: '手机号格式不正确',
					icon: 'none'
				});
				return;
			}
			if (!passwordz.test(this.password)) {
				uni.showToast({
					title: '密码格式不正确',
					icon: 'none'
				});
				return;
			}
			const { phone, password } = this;
			const res = await api('/login/cellphone', { phone, password ,isLogin:true});
			console.log(res,963);
			if (res.statusCode == 200) {
				// 将用户信息存入缓存
				uni.setStorageSync('userInfo', res.data.profile);
				// 跳转个人中心
				uni.switchTab({
					url: '../personal/personal'
				});
			} else {
				uni.showToast({
					title: '账号或密码不正确',
					icon: 'none'
				});
			}
		}
	}
};
</script>

<style lang="less" scoped>
/* pages/login/login.wxss */
.wrapper {
	position: relative;
	z-index: 90;
	padding-bottom: 40rpx;
}

.left-top-sign {
	font-size: 120rpx;
	color: #f8f8f8;
	position: relative;
	left: -16rpx;
}

.welcome {
	position: relative;
	left: 50rpx;
	top: -90rpx;
	font-size: 46rpx;
	color: #555;
}

.input-content {
	padding: 0 60rpx;
}
.input-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 0 30rpx;
	background: #f8f6fc;
	height: 120rpx;
	border-radius: 4px;
	margin-bottom: 50rpx;
}

.input-item:last-child {
	margin-bottom: 0;
}
.input-item .tit {
	height: 50rpx;
	line-height: 56rpx;
	font-size: 30rpx;
	color: #606266;
}
.input-item input {
	height: 60rpx;
	font-size: 30rpx;
	color: #303133;
	width: 100%;
}
.confirm-btn {
	width: 630rpx !important;
	height: 76rpx;
	line-height: 76rpx;
	border-radius: 50rpx;
	margin-top: 70rpx;
	background: #d43c33;
	color: #fff;
	font-size: 32rpx;
	padding: 0;
}
.confirm-btn2:after {
	border-radius: 100px;
}

.forget-section {
	font-size: 28rpx;
	color: #4399fc;
	text-align: center;
	margin-top: 40rpx;
}

.register-section {
	position: absolute;
	left: 0;
	bottom: 50rpx;
	width: 100%;
	font-size: 28rpx;
	color: #606266;
	text-align: center;
}
.register-section text {
	color: #4399fc;
	margin-left: 10rpx;
}
</style>
